<template>
<div style="text-align: center;background-color:#f2f2f2;height:100%;min-width:750px">
    <!-- 头部 -->
    <div style="height:100px;width:100%;background-color:#00b7ea;line-height:80px">
        <div style="height: 80px; width:70%;margin:auto;padding-top:10px">
            <h1 style="color: #ffffff;float:left">541导航</h1>
            <div style="float:right">
                <span style="color:#ffffff"><b>您好，{{user.account}}</b></span>
                <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
            </div>
        </div>
    </div>

    <!-- 中部 -->
    <div style="width:100%;">
        <div style="min-width:180px;display:inline-block;float:left;width:20%;padding-top:10px;">
            <!-- 左侧导航 -->
            <div id="nav" style="display:inline-block;float:right">
                <el-button type="info" plain @click="$router.push('/')">首页</el-button>
                <el-button type="info" id="nav_1" @click='background("nav_1","nav_2")' plain>导航管理</el-button>
                <el-button type="info" id="nav_2" @click='background("nav_2","nav_1")' plain>个人资料</el-button>
            </div>
        </div>
        <!-- 导航管理 右侧 -->
        <div class="inline" style="min-width:550px;width:60%;text-align:left;padding-top:45px;" v-if="nav">
            <h3><b>导航管理</b></h3>
            <div style="margin-top:20px">
                <div style="">
                    <el-button type="text" @click="addSecurity()">新增</el-button>
                    <el-button type="text" @click="deleteCode()">删除</el-button>
                </div>
            </div>

            <el-checkbox :indeterminate='isIndeterminate' v-model="multiple_all" @change='moreOptions("all")'>全选</el-checkbox>
            <el-card style="margin-top:20px;min-width:670px" class="box-card line_record" v-for="(a,ind) in security_list" :key="ind" @click.native='toView(ind)'>
                <el-row>
                    <el-col class="line_option" :span="1">
                        <div  @click.stop style="min-width:15px">
                            <el-checkbox v-model="multiple[ind].bool" @change='moreOptions(a.id)'></el-checkbox>
                        </div>
                    </el-col>
                    <el-col class="line_option" :span="12" style="width:20%">
                        <div style="width:200px;min-winth:100px">
                            {{a.title}}
                        </div>
                    </el-col>
                    <el-col class="line_option" :span="5" style="width:38%;min-winth:150px">
                        <div class="dateOf" style="float:right;margin-right:20px;min-width:140px">
                            <p style="font-size:15px">{{a.create_time}}</p>
                            <p style="font-size:12px;color:#9e9e9e">加入日期</p>
                        </div>
                    </el-col>
                    <el-col class="line_option" :span="6" style="min-width:250px;float:right">
                        <div>
                            <div @click='toView(ind)' style="display:inline-block">
                            <div>
                                <p style="font-size:12px">安全码</p>
                                <p style="font-size:24px;letter-spacing:2px;margin-top:1px">{{a.code}}</p>
                            </div>
                            </div>
                            <div style="display:inline-block">
                                <p style="font-size: 12px;color:#aa9eb6;" @click="mycopy()">复制安全码</p>
                                <el-button type="primary" size='mini' style="width: 70px;background-color:#27c989">进入</el-button>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </el-card>
        </div>


        <!-- 个人资料 -->
        <div v-else id="personalData" class="inline" style="min-width:550px;width:60%;text-align:left;padding-top:45px;">
            <div style="height:80px">
                <h3 style="float:left;margin-top:30px">个人资料</h3>
            </div>
            <div>
                <p class="qs_color" style="font-size:17px">基本信息</p>
                <div style="margin-top:10px;margin-bottom:10px">
                    <p style="font-size:12px;color:#9e9e9e">用户名</p>
                    <p style="font-size:12px">{{user.account}}</p>
                </div>

                <el-form ref="form" :model="user" label-width="80px" style="width:350px">
                    <el-form-item label="">
                        <p class="qs_color" style="font-size:17px">修改密码</p>
                    </el-form-item>
                    <el-form-item label="">
                        <el-input type='password' v-model="user.pwd" placeholder="原密码"></el-input>
                    </el-form-item>
                    <el-form-item label="">
                        <el-input type='password' v-model="user.newpwd" placeholder="新密码"></el-input>
                    </el-form-item>
                    <el-form-item label="">
                        <el-input type='password' v-model="user.newpwds" placeholder="确认新密码"></el-input>
                    </el-form-item>
                    <p class="qs_color"  style="font-size:17px">修改邮箱</p>
                    <el-form-item label="">
                        <el-input v-model="user.email"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="button" @click="updateUser">保存</el-button>
                    </el-form-item>
                </el-form>
            </div>
            

        </div>


    </div>

    <!-- 这个是负责复制的 -->
    <input id="hide" type="text" style="display: none;">


    <!-- 悬浮安全码的详细信息 -->
    <el-dialog
        :visible.sync="dialogVisible"
        width="600px"
        title="编辑"
        :before-close="()=>{dialogVisible=false}" :show-close='false'
        id="option">
        <div id="option_2" style="min-width:560px;width:560px;overflow:hidden">
            <div id="option_3" style="width:575px;height:400px;overflow:auto">
                <div id="urlname">
                    <p style="display:block;">网站名称</p>
                    <el-input id="title" v-model="temporary.title" placeholder="网站名称" style="width:400px;"></el-input>
                </div>

                <div id="aqm">
                    <p for="" style="display:block;">安全码</p>
                    <el-input v-model="temporary.code" placeholder="安全码" style="width:300px;"></el-input>
                    <el-button style="">随机生成</el-button>
                    <p for="" style="margin:0">安全码5到6个字符</p>
                </div>

                <p for="">公告</p>
                <div id="notice">
                    <p for="">公告内容</p>
                    <el-input placeholder="公告内容" style="width:300px;"></el-input>
                </div>

                <div id="url" style="display:flex;justify-content:space-between;">
                    <p style="display:inline-block">端口名称/网址</p>
                    <el-button @click="addSecurity(index)" style="margin-right:50px" type="success" icon="el-icon-plus" circle></el-button>
                </div>
                <div id="option_4">
                    <el-table
                        id="option_5"
                        :data="temporary.option"
                        style="width: 100%">
                        <el-table-column
                        label="端口名称"
                        width="150">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.port" placeholder="端口" style="width:100px;"></el-input>
                        </template>
                        </el-table-column>
                        <el-table-column
                        label="网址"
                        width="300">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.url" placeholder="网址" style="width:250px;"></el-input>
                        </template>
                        </el-table-column>
                        <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button
                            size="mini"
                            type="danger"
                            @click="delectSecurity(index, scope.$index)">删除</el-button>
                        </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
        <span slot="footer" id="tips" class="dialog-footer">
            <el-button size="mini" @click="dialogVisible = false;hf()">取 消</el-button>
            <el-button size="mini" type="primary" @click="dialogVisible = false;enter()">确 定</el-button>
        </span>
    </el-dialog>
</div>



</template>

<script>
export default {
    name:'mycenter',
    data(){
        return{
            //用户信息
            user:{
                id:'',
                account:'',
                pwd:'',
                newpwd:'',
                newxpwds:'',
                email:'',
            },
            dialogVisible: false,
            security_list:[{title:''}],
            //复制
            security_lists:[],
            //悬浮窗显示的下标
            index:0,
            //保存删除的
            delect_num:[],
            //零时存储，点击取消时清空，确定时合并
            delect:[],
            // 悬浮窗显示
            temporary:[],
            //绑定选择器
            multiple:[{id:'',bool:false}],
            multiple_all:false,
            //全选
            isIndeterminate: false,
            //选择个人设置或者导航管理
            nav:true,
        }
    },
    methods:{
            moreOptions(data){
                //阻止冒泡
                event.stopPropagation();
                if(data=='all'){
                    //全选||全部取消
                    this.multiple.map((a,index)=>{
                        a.bool = this.multiple_all;
                    });
                }else{
                    //判断目前是否为全选||全取消
                    let is = false;
                    let iss = false;
                    this.multiple.map((a,index)=>{
                        if(a.bool){
                            is=true;
                        }else{
                            iss=true;
                        }
                    });
                    if(is && iss){
                        //有选中的也有未选择的
                        this.isIndeterminate=true;
                    }else if(is){
                        //全选
                        this.multiple_all = true;
                        this.isIndeterminate=false;
                    }else{
                        this.multiple_all = false;
                        this.isIndeterminate=false;
                    }

                }
            },
            background(id,ids){
                if(id=='nav_1'){
                    document.getElementById('nav_1').setAttribute('style','background-color: #dbdbdb;');
                    document.getElementById('nav_2').setAttribute('style','background-color: #f2f2f2;');
                    this.nav=true;
                }else{
                    document.getElementById('nav_2').setAttribute('style','background-color: #dbdbdb;');
                    document.getElementById('nav_1').setAttribute('style','background-color: #f2f2f2;');
                    this.nav=false;
                }
            },
            mycopy(){
                // 复制需要一个input做中介
                $("#hide").val($("#ma").text());
                $("#hide").select();
                if(document.execCommand("Copy")){
                    this.$message({
                        message: '复制成功',
                        type: 'success'
                    });
                }
            },
            // 获取用户的个人网站码
            getM(){
                let user_id = this.$route.params.userId;
                console.log('id='+user_id);
                const loading = this.$loading({
                lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
                });
                //向后端发起请求
                this.$axios.post(this.$API.GETUSERM_LIST,{
                    user_id:user_id
                }).then(res=>{
                    console.log(res);
                    if(res.code==200){
                        //获取成功
                        loading.close();
                        this.security_list=res.data.list;
                        this.security_lists=this.$fun.copy(res.data.list);
                        //获取所有的id;
                        this.multiple = this.security_lists.map((a,index)=>{
                            return {id:a.id,bool:false};
                        });
                        this.user.id = res.data.user.id;
                        this.user.email = res.data.user.email;
                        this.user.account=res.data.user.account;

                    }else if(res.code==-2){
                        this.$router.push('/');
                    }else{
                        this.$message.error('获取资源失败，请联系网站管理员');
                    }
                });
            },
            delectSecurity(index,indexs){
                //临时存储
                this.delect.push(this.security_list[index].option[indexs].id);
                //删除网址
                this.security_list[index].option.splice(indexs,1);
            },
            //恢复删除的,点击删除
            hf(){
                console.log('调用了取消');
                //进行深拷贝复制
                this.security_list = this.$fun.copy(this.security_lists);
                console.log('深拷贝完成');
                this.delect=[];
            },
            //确定
            enter(){
               this.security_lists[this.index] = this.$fun.copy(this.security_list[this.index]);
                //合并删除
                this.delect_num = this.delect_num.concat(this.delect);
                // ========显示提交动画=========================================================
                     const loading = this.$loading({
                        lock: true,
                        text: '提交中',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    });
                //=============================================================================
                this.$axios.post('/api/updateM_list',{
                    captcha:this.temporary,
                    delect:this.delect_num,
                    user_id:this.user.id,
                }).then(res=>{
                    console.log(res);
                    //关闭动画
                    loading.close();
                    if(res.code==200){
                        this.$message({
                            message: '提交成功',
                            type: 'success'
                        });
                        //data存在说明提交的是添加数据
                        if(res.data){
                            //添加到主体以及复制体
                            this.security_list.push(res.data);
                            this.security_lists.push(JSON.parse(JSON.stringify(res.data)));
                            //添加一个选择框
                            this.multiple.push({id:res.data.id,bool:false});
                        }
                    }else{
                        this.$message.error('提交失败');
                    }
                }).catch(err => {
                    //关闭动画
                    loading.close();
                    // ror: Cannot read property 'id' of null
                    this.$message.error('服务器系统错误'+err);
                });
            },
            addSecurity(index){
                // Event.stopPropagation();
                //添加一条空数据
                if(index!=undefined){
                    //添加一个空选项
                    console.log(this.security_list);
                    this.temporary.option.push({captcha_id: '', url: "", port: ""});
                }else{
                    //添加一个空主体
                    this.temporary={code:"",title:"",user_id:this.user.id,option:[]};
                    this.dialogVisible =true;
                }
            },
            //点击查看,boot表示是否显示一个空的添加
            toView(ind,boot){
                event.stopPropagation();
                // vent.stopPropagation();
                //悬浮窗显示
                this.dialogVisible=true;
                this.index=ind;
                console.log(this.security_list[this.index].option);
                if(boot==undefined){
                    this.temporary=this.security_list[this.index];
                }
            },
            // 删除安全码
            deleteCode(){
                //获取
                let dele = this.multiple.map((a,index)=>{if(a.bool) return a.id;});
                //删除未定义的
                for(let a in dele){if(dele[a]==undefined)dele.splice(a,1)}
                
                if(dele.length==0){
                    alert('请选择需要删除的安全码');
                    return;
                }   
                this.$axios.post('/api/delectM_list',{
                    userId:this.user.id,
                    delectId:dele
                }).then(res=>{
                    if(res.code==200){
                        alert('删除成功');
                        //清除原数组
                        dele.map((a,index)=>{
                            for(let b in this.security_list){
                                if(this.security_list[b].id==a){
                                    this.security_list.splice(b,1);
                                    this.security_lists.splice(b,1);
                                    break;
                                }   
                            }
                        });
                        this.multiple = this.security_list.map((a,index)=>{
                            return {id:a.id,bool:false}
                        });
                        this.isIndeterminate=false;
                    }else{
                        alert('删除失败');
                    }
                });
            },
            updateUser(){
                //修改用户资料
                this.$axios.post(this.$API.UPDATEUSER,{
                    user:this.user
                }).then(res=>{
                    if(res.code==200){
                        this.user.pwd='';
                        this.user.newpwd='';
                        this.user.newpwds='';
                        alert('修改成功');
                    }else{
                        alert('原密码错误，请输入正确密码');
                        this.user.pwd='';
                    }
                });
            }
    },
    created(){
        this.getM();
    }
}
</script>



<style scoped>

/* 左侧导航栏 */
#nav > button{
    display:block;
    margin:0;   
    width: 180px;
    height: 40px;
    margin-top:30px;
    border:none;
    color: #767676;
}

/* 导航管理按钮默认背景色 */
#nav_1{
    background-color: #dbdbdb;
}
#nav > button:hover{
    background-color: #ebebeb !important;
}

/* 悬浮框编辑部分的样式 */
#option >>> div.el-dialog__header{
    background-color: #e5e6e5;
    text-align: left;
}
/* 悬浮窗整体的样式，圆角之类的 */
#option >>> div{
    border-radius: 10px;
    text-align: left;
}
#aqm > p:nth-child(1),#urlname > p,#notice > p,#aqm > p:nth-child(4){
    margin-top: 20px;
    font-size: 12px;
    color: #b4b2b5;
}

/* 公告，端口提示 */
#option_3 > p,#url > p{
    margin-top: 20px;
}


/* 悬浮窗的主体 */
#option >>> div.el-dialog__body{
    padding-top: 0;
    padding-bottom: 5px;
}

/* 悬浮窗底部 */
#option >>> div.el-dialog__footer{
    padding-bottom: 10px;
    text-align: right;
}





/* ================================================================================== */
/* 一条完整记录 */
.line_record >>> .el-card__body,.el-row{
    height: 85px;
    padding: 0;    
}
/* 记录里面分离的大div */
div.line_option.el-col{
    height: 100%;
}
/* 选择框以及标题 */
div.line_option.el-col.el-col-12,div.line_option.el-col.el-col-1{
    line-height: 85px;
}

div.line_option.el-col.el-col-5 > div{
    position:relative;
    top: 25px;
}

/* 安全码 && 复制安全码 */
div.line_option.el-col.el-col-6 > div > div{
    /* 顶端对齐 */
    vertical-align: top;
    height: 100%;
    /* background-color: #767676; */

}

/* 安全码 && 复制安全码 */
div.line_option.el-col.el-col-6 > div{
    height: 70%;
    width: 90%;
    margin: 10px;
    padding: 3px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}
/* 安全码 */
div.line_option.el-col.el-col-6 > div > div:nth-child(1){
    background-color:#ebebeb;
    height: 83%;
    width: 53%;
    padding:5px;
}
/* 复制安全码 */
div.line_option.el-col.el-col-6 > div > div:nth-child(2){
    text-align: center;
    height: 80%;
    padding:5px;
    border: 1px solid #e0e0e0;
}

/* 选择 */
div.line_option.el-col.el-col-1 > div > label{
    margin-left: 10px;  
}



.inline{
    display: inline-block;
}


/* 个人设置中的清色字体 */
.qs_color{
    color: #05b7ea;
    font-size: 18px;
}

#personalData >>> div{
    margin-left: 0 !important;
}
</style>